<template>
    <div class="class_search">
        <div class="search_left"><van-icon name="arrow-left" @click="back" /></div>
        <div class="search_right">
            <van-search v-model="value" placeholder="请输入搜索关键词" input-align="center" @click="skip" />
        </div>
    </div>
    <div class="class_box">
        <div class="box_left">
            <ul>
                <li v-for="i in classify" @click="on(i.id)" :class="classindex == i.id ? 'active' : ''">{{ i.text }}</li>
            </ul>
        </div>
        <div class="box_right">
            <ClassifyContent />
        </div>
    </div>
</template>

<script setup>
import { useStore } from "vuex";
import { ref, reactive, computed } from "vue";
import ClassifyContent from "@/components/ClassifyContent.vue";
import { useRouter } from "vue-router";
let router = useRouter();
let classify = reactive([
    { id: 0, text: "热门推荐" },
    { id: 1, text: "服装" },
    { id: 2, text: "家电" },
    { id: 3, text: "数码" },
]);
let value = "";
let store = useStore();
let classindex = ref(0);
let dd = computed(() => {
    return store.state.myindex.index;
});
let on = (x) => {
    classindex.value = x;
    store.commit("myindex/changeIndex", x);
};
let back = () => {
    router.go(-1);
};
let skip = () => {
    router.push({ path: "/search" });
    return;
};
</script>

<style lang="scss" scoped>
.class_search {
    background-color: #fff;
    border-bottom: 1px solid #e2e2e2;
    display: flex;
    align-items: center;
    .search_left {
        width: 2.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #8d8d8d;
        font-size: 1.25rem;
    }

    .search_right {
        flex: 1;
    }
}
.class_box {
    height: calc(100vh - 99px);
    margin-bottom: 3rem;
    display: flex;
    .box_left {
        width: 5.3125rem;
        background-color: #f8f8f8;
        overflow: scroll;
    }
    ul {
        overflow: scroll;
    }
    li {
        font-size: 14px;
        height: 2.875rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    li.active {
        color: #ff5154;
        background-color: rgb(255, 255, 255);
    }
    .box_right {
        flex: 1;
        overflow: scroll;
        background-color: #fff;
    }
}
</style>
